<template>
 <div id="SlotZb">
    
    <ul >

        <!-- 接收父级数据 -->
        <!-- MV 精选页面 推荐MV  DT 精选页面 主播电台 GD 歌单页面 全部订单 -->
        <li v-for="(items,index) in data"
        :key="index"> 
            <img  :src="items.cover" alt="">
            <!-- 右边人气 -->
             <div class="right-rq">
                <span class="iconfont">&#xe708;</span>
                <span>1242</span>
             </div>
            <div class="title-box">
                <img src="../../public/homeImg/NewMusic1.jpg" alt="">
                <span class="name">薛之谦</span>
                <div class="grad">
                    <span class="iconfont">&#xe602;</span>
                </div>
            </div>
            <!-- 图片下的两行标题 -->
            <span class="title-bottom" style="font-size:18px;margin-top: 4px;">{{items.title}}</span>
          <!--items.type !== 'LeftSP' 左边导航栏的视频不显示 -->
           
            <span></span>
        </li>

   
    </ul>
   
 </div>   
</template>

<script>
export default {
    data() {
        return {
            spNowrap:''
        }
    },
    props:{
        data:{
            typeof:Object || Array,
            
            default:_=>{
                return{}
            }
        },
        MV:{
            
        },
       
    },
     mounted() {
           this.spNowrap = this.data[1].type
        },
        methods: {
            
        }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
#SlotZb{
div,span,ul,li,img{
    font-size: 0;
}
ul{
    display: flex;
    flex-wrap: wrap;
li{
        
position: relative;
  
        @media (min-width: 1100px) {
    flex: 0 0 25%;
    max-width: 25%;
    margin-bottom: 30px;
    } 
    @media (min-width: 1800px) {
    flex: 0 0 20%;
    max-width: 20%;
    } 
    img{
        width: 95%;
        display: block;
        border-radius: 5px;
    }
.right-rq{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 8%;
    top: 2px;
    span{
    font-size: 16px;
    word-spacing:-3px;
    color: white;
    }
    span:first-child{
        font-size: 28px;
        margin-right: -4px;
    } 
}
.title-box{
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 55px;
    left: 8px;
        img{
            height: 32px;
            width: 32px;
            border-radius: 50%;
        }
        .name{
            font-size: 16px;
            margin-left: 5px;
            color: white;
        }
        .grad{
            margin-left: 5px;
            padding: 2px;
            background: #F0483B;
            border-radius: 50%;
            span{
                font-size: 16px;
                font-weight: 900;
                color: wheat;
            }
        }
    }
 }

 }
 }
 

</style>